<!--模块管理 basicInfoConfig-->
<template>
  <div class="commandManagement appMainWarp">
    <div style="display: flex">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="学校名称:">
          <el-select
            v-model="searchKey.schoolname"
            filterable
            value-key="schoolid"
            placeholder="请选择学校名称"
            @change="schoolChange($event)"
          >
            <el-option
              v-for="item in schoolList"
              :key="item.schoolid"
              :label="item.schoolname"
              :value="{ schoolid: item.schoolid, schoolname: item.schoolname }"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户类型:">
          <el-select
            v-model="searchKey.usertype"
            filterable
            value-key="schoolid"
            placeholder="请选择学校名称"
          >
            <el-option label="学生" :value="1" />
            <el-option label="教师" :value="2" />
            <el-option label="其他" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户名称:">
          <el-input
            v-model="searchKey.username"
            clearable
            placeholder="请输入用户名称名称"
            @keyup.enter.native="onsearch"
          />
        </el-form-item>
        <el-form-item label="设备编码:">
          <el-input
            v-model="searchKey.deviceno"
            clearable
            placeholder="请输入设备编码"
            @keyup.enter.native="onsearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <template>
      <el-table
        ref="table"
        :data="searchData"
        v-loading="page.tableLoading"
        center
        stripe
        border
      >
        <el-table-column
          prop="schoolname"
          label="学校名称"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="usertype"
          label="用户类型"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="props">
            {{
              props.row.status == 1
                ? "学生"
                : props.row.status == 2
                ? "教师"
                : "其他"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="userid"
          label="用户编码"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="classname"
          label="班级名称"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="gradeid"
          label="年级编码"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="gradename"
          label="年级名称"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="passtime"
          label="通过时间"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="deviceno"
          label="设备编码"
          header-align="center"
          align="center"
          show-overflow-tooltip
        />

        <el-table-column
          prop="devicemode"
          label="进出方式"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="props">
            {{ props.row.devicemode == 1 ? "进" : "出" }}
          </template>
        </el-table-column>
      </el-table>
    </template>
    <Pagination
      :total="page.totalRow"
      :page.sync="page.currentPage"
      :limit.sync="page.pageSize"
      @pagination="onSubmit"
    />
  </div>
</template>

<script>
import { getschoollist } from "@/api/educationalManagement/index";
import Pagination from "@/components/Pagination"; // 分页
import { getgatebarrierpassloglist } from "@/api/roadGateManagement/index";
export default {
  name: "ThroughRecord",
  components: { Pagination },
  data() {
    return {
      searchKey: {
        agentname: "", // 姓名
        schoolname: "",
        usertype: null,
        username: "",
        classid: null,
        classname: "",
        gradeid: "",
        gradename: "",
        passtime: null,
        deviceno: null,
        devicemode: 1,
      },
      searchData: [], // 搜索的值
      page: {
        tableLoading: false,
        currentPage: 1, // 当前页
        pageSize: 10, // 默认条数
        totalRow: 0, // 总条数
        totalPage: 0, // 总页数
      },
    };
  },
  mounted() {
    this.getSchoolList();
    this.onsearch();
  },
  methods: {
    onsearch() {
      this.page.currentPage = 1;
      this.onSubmit();
    },
    schoolChange(val) {
      this.schoolList.forEach(element => {
        if (element.schoolid==val) {
          this.addModel.item.schoolname = element.schoolname
        }
      });
      this.addModel.item.gradeid = "";
      this.addModel.item.gradename = "";
      this.gradeList = [];
    },
    getSchoolList() {
      var params = {};
      var that = this;
      params.pageindex = 1; // 当前页数
      params.pagesize = 1000; // 每页展示条数
      getschoollist(params)
        .then((res) => {
          if (res.data.code == 0) {
            that.schoolList = res.data.data.datalist;
          } else {
            that.$message({
              type: "success",
              message: res.data.msg,
            });
          }
        })
        .catch(() => {});
    },
    onSubmit() {
      var params = {};
      var that = this;
      params.pageindex = that.page.currentPage; // 当前页数
      params.pagesize = that.page.pageSize; // 每页展示条数
      const options = Object.assign(params, this.searchKey);
      that.page.tableLoading = true;
      getgatebarrierpassloglist(options)
        .then((res) => {
          that.page.tableLoading = false;
          if (res.data.code == 0) {
            that.searchData = res.data.data.datalist;
            that.page.totalRow = res.data.data.totalcount;
          } else {
            that.$message({
              type: "error",
              message: res.data.msg,
            });
          }
          // that.searchData = res.data.data.datalist
          // that.page.totalRow = res.data.data.totalcount
          // that.page.totalPage = res.data.page.totalPageNum
          // that.page.pageSize = parseInt(res.data.page.pageNum)
        })
        .catch(() => {
          that.page.tableLoading = false;
        });
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 200px;
}
.el-table .el-button {
  display: inline-block;
  margin: 0 10px;
}
</style>
